<template>
    <fieldset>
        <legend>用户登录界面</legend>
        账号：<input type="text" v-model="username"><br>
        密码：<input type="text" v-model="password">
        <button @click="login">登录</button>
    </fieldset>
</template>

<script setup>
import {ref} from "vue"
import * as api from "../../api/users"
import { useRouter } from "vue-router";
let username = ref("")
let password = ref("")

let router = useRouter()
 let login = async()=>{
    let res = await api.loginApi(username.value,password.value)
    
    //服务器会返回token，这个token是个令牌，这个令牌需要保存在本地，后续请求的时候带上令牌，就能随意访问服务器的数据了
    
    //1.localStorage,关掉页面，只要token还具备时效性，那么就能访问其他页面，不需要你重新登录
    //2.sessStorage,用户关掉页面，token就被清除，不管他还生不生效，重新打开页面，用户重新登录

    if(res.data.state){
        //将token保存进本地
        sessionStorage.setItem('qf-token',res.data.token)
        router.push("/")
    }else{
        alert(res.data.msg)
    }
    console.log(res);
}
</script>